.entrance-leave-active {
    transition: all .1s ease;
}

.entrance-enter-active {
    transition: all .3s cubic-bezier(0, 0.75, 0.2, 1)
}

.entrance-leave-from {
    opacity: 1;
}

.entrance-leave-to {
    opacity: 0;
}

.entrance-enter-from {
    transform: translate(0, 70px);
}

.entrance-enter-to {
    transform: translate(0, 0);
}

.fade-leave-active,
.fade-enter-active {
    transition: all .1s ease;
}

.fade-leave-from,
.fade-enter-to {
    opacity: 1;
}

.fade-leave-to,
.fade-enter-from {
    opacity: 0;
}

.zoom-out-leave-active {
    transition: all 80ms cubic-bezier(0.65, 0, 1, 0.42)
}

.zoom-out-enter-active {
    transition: all 250ms cubic-bezier(0, 0.65, 0.26, 1);
}

.zoom-out-leave-from {
    transform: scale(1);
    opacity: 1;
}

.zoom-out-leave-to {
    transform: scale(1.03);
    opacity: 0;
}

.zoom-out-enter-from {
    transform: scale(0.9);
    opacity: 0;
}

.zoom-out-enter-to {
    transform: scale(1);
    opacity: 1;
}

.zoom-in-leave-active {
    transition: all 80ms cubic-bezier(0.65, 0, 1, 0.42)
}

.zoom-in-enter-active {
    transition: all 250ms cubic-bezier(0, 0.65, 0.26, 1);
}

.zoom-in-leave-from {
    transform: scale(1);
    opacity: 1;
}

.zoom-in-leave-to {
    transform: scale(0.9);
    opacity: 0;
}

.zoom-in-enter-from {
    transform: scale(1.03);
    opacity: 0;
}

.zoom-in-enter-to {
    transform: scale(1);
    opacity: 1;
}

.slide-up-leave-active {
    transition: all 80ms cubic-bezier(0.65, 0, 1, 0.42)
}

.slide-up-enter-active {
    transition: all 250ms cubic-bezier(0, 0.65, 0.26, 1);
}

.slide-up-leave-from {
    transform: translate(0, 0px);
    opacity: 1;
}

.slide-up-leave-to {
    transform: translate(0, -80px);
    opacity: 0;
}

.slide-up-enter-from {
    transform: translate(0, 80px);
    opacity: 0;
}

.slide-up-enter-to {
    transform: translate(0, 0px);
    opacity: 1;
}

.slide-down-leave-active {
    transition: all 80ms cubic-bezier(0.65, 0, 1, 0.42)
}

.slide-down-enter-active {
    transition: all 250ms cubic-bezier(0, 0.65, 0.26, 1);
}

.slide-down-leave-from {
    transform: translate(0, 0px);
    opacity: 1;
}

.slide-down-leave-to {
    transform: translate(0, 80px);
    opacity: 0;
}

.slide-down-enter-from {
    transform: translate(0, -80px);
    opacity: 0;
}

.slide-down-enter-to {
    transform: translate(0, 0px);
    opacity: 1;
}

.slide-left-leave-active {
    transition: all 80ms cubic-bezier(0.65, 0, 1, 0.42)
}

.slide-left-enter-active {
    transition: all 250ms cubic-bezier(0, 0.65, 0.26, 1);
}

.slide-left-leave-from {
    transform: translate(0px, 0);
    opacity: 1;
}

.slide-left-leave-to {
    transform: translate(-80px, 0);
    opacity: 0;
}

.slide-left-enter-from {
    transform: translate(80px, 0);
    opacity: 0;
}

.slide-left-enter-to {
    transform: translate(0px, 0);
    opacity: 1;
}


.slide-right-leave-active {
    transition: all 80ms cubic-bezier(0.65, 0, 1, 0.42)
}

.slide-right-enter-active {
    transition: all 250ms cubic-bezier(0, 0.65, 0.26, 1);
}

.slide-right-leave-from {
    transform: translate(0px, 0);
    opacity: 1;
}

.slide-right-leave-to {
    transform: translate(80px, 0);
    opacity: 0;
}

.slide-right-enter-from {
    transform: translate(-80px, 0);
    opacity: 0;
}

.slide-right-enter-to {
    transform: translate(0px, 0);
    opacity: 1;
}

.list-item-move,
/* 对移动中的元素应用的过渡 */
.list-item-enter-active {
    transition: all 300ms ease;
}

.list-item-enter-from,
.list-item-leave-to {
    opacity: 0;
    transform: scale(0.99);
}

/* 确保将离开的元素从布局流中删除
  以便能够正确地计算移动的动画。 */
.list-item-leave-active {
    position: absolute;
    left: 0;
    right: 0;
}

.popup-enter-active,
.popup-leave-active {
    transition: all 100ms ease;
}

.popup-enter-from,
.popup-leave-to {
    transform: scale(0.95);
    opacity: 0;
}

.popup-enter-to,
.popup-leave-from {
    transform: scale(1);
    opacity: 1;
}
